﻿<div class="col-md-3">
    <div class="panel panel-default">
        <div class="panel-heading">选择字段</div>
        <div class="panel-body">
            <div class="field-item"
                 :id="template.Name"
                 :class="template.Name"
                 v-for="template in templates"
                 draggable="true"
                 @@dragstart="templateDrag($event)">
                {{template.DisplayName}}
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">基本信息</div>
        <div class="panel-body">
            <div class="form-group">
                <label class="control-label">名称</label>
                <input type="text" class="form-control required" v-model="title">
            </div>
            <div class="form-group">
                <label class="control-label">描述</label>
                <textarea class="form-control" v-model="description"></textarea>
            </div>
        </div>
        <div class="panel-footer">
            <a v-click="save()" class="btn btn-primary">保存</a>
            <a class="btn btn-default cancel">取消</a>
        </div>
    </div>
</div>
<div class="col-md-6">
    <div class="alert alert-warning alert-dismissible" role="alert" ng-if="Message">
        {{Message}}
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">表单</div>
        <div class="panel-body form-display">
            <div class="row" style="min-height:200px"
                 @@drop="templateDrop($event)"
                 @@dragover='allowDrop($event)'>

                <div ng-class="columnCute(field,$index)" v-for="field in fields" draggable="true">
                    <div class="form-group clearfix" v-for="field in fields" v-on:click="editTemplate(field)">
                        <component :is="field.Name" v-model="field"></component>{{field.Name}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-md-3">
    <div class="panel panel-default">
        <div class="panel-heading">字段设置</div>
        <div class="panel-body">
            <div v-if="fieldInfo">
                <form name="fieldForm">
                    <div class="form-group">
                        <label class="control-label">名称</label>
                        <input class="form-control" type="text" v-model="fieldInfo.DisplayName" maxlength="100" />
                    </div>
                    <div class="form-group">
                        <label class="control-label">说明</label>
                        <textarea name="Description" id="Description" class="form-control" rows="3" cols="10" maxlength="500" v-model="fieldInfo.Description"></textarea>
                    </div>
                    <div class="form-group" v-if="fieldInfo && fieldInfo.AdditionalSettings" v-for="setting in fieldInfo.AdditionalSettings">
                        <label class="control-label" for="{{setting.Name}}">{{setting.DisplayText}}</label>
                        <input class="form-control" type="text" id="{{setting.Name}}" ng-model="setting.Value" />
                    </div>
                    <div class="form-group">
                        <label class="control-label">布局</label>
                        <div>
                            <div class="btn-group">
                                <a class="btn btn-default btn-sm" :class="{disabled:fieldInfo.Column=='col-md-12'}" v-click="fieldInfo.Column='col-md-12'">整行</a>
                                <a class="btn btn-default btn-sm" :class="{disabled:fieldInfo.Column=='col-md-4'}" v-click="fieldInfo.Column='col-md-4'">1/3行</a>
                                <a class="btn btn-default btn-sm" :class="{disabled:fieldInfo.Column=='col-md-6'}" v-click="fieldInfo.Column='col-md-6'">1/2行</a>
                                <a class="btn btn-default btn-sm" :class="{disabled:fieldInfo.Column=='col-md-8'}" v-click="fieldInfo.Column='col-md-8'">2/3行</a>
                            </div>
                        </div>
                    </div>
                    <div ng-include="'/Plugins/ZKEACMS.FormGenerator/EditorTemplate/' + fieldInfo.Name + '.html'"></div>
                </form>
            </div>
        </div>
    </div>
</div>
